<template>
  <div class="multi">
    <div class="heard">
      <h1>课程AI分析面板</h1>
    </div>
    <div style="padding: 30px 0; margin: 0 20px">
      <div style="margin-bottom: 10px">
        <Heard :info="course_info" @openCourse="openCourse"></Heard>
      </div>
      <!-- 二 -->
      <div class="disp_between">
        <!-- 课堂类型 -->
        <div class="class_type">
          <!-- <div class="title_a">课堂类型</div> -->
          <div class="titile">
            <h5>课堂类型</h5>
          </div>
          <div v-if="course_type">
            <PieA id="pie_child" :pie_data="course_type"> </PieA>
            <p
              class="text_div"
              style="
                line-height: 18px;
                position: absolute;
                bottom: 0;
                border: 1px solid #1f4b7d;
              "
            >
              {{ course_type.summarize }}
            </p>
          </div>
        </div>
        <!-- 重点教情回顾 -->
        <div class="educational_review">
          <div class="titile">
            <h5>重点教情回顾</h5>
          </div>
          <div>
            <div class="disp_between">
              <div class="solid border">
                <div class="title_b1"><span>课程反馈</span></div>
                <div class="disp_around">
                  <PieB
                    id="Pie1"
                    :title="'总体参与率'"
                    :value="course_feedback.participate_rate"
                  ></PieB>
                  <PieB
                    id="Pie2"
                    :title="'总体抬头率'"
                    :value="course_feedback.hand_up_rate"
                  ></PieB>
                  <PieB
                    id="Pie3"
                    :title="'总体低头率'"
                    :value="course_feedback.hand_down_rate"
                  ></PieB>
                </div>
              </div>
              <div class="solid border">
                <div class="title_b2"><span>专注度反馈</span></div>
                <div class="disp_around">
                  <PieB
                    id="Pie4"
                    :title="'高专注率时段占比'"
                    :value="focus_feedback.high_focus_rate"
                  ></PieB>
                  <PieB
                    id="Pie5"
                    :title="'低专注率时段占比'"
                    :value="focus_feedback.low_focus_rate"
                  ></PieB>
                </div>
              </div>
            </div>
            <div style="padding: 0px 10px 10px">
              <evaluate-card :data="teaching_situation" />
            </div>
          </div>
        </div>
        <!-- 教学行为分析 -->
        <div class="t_behavior_analysis">
          <div class="titile">
            <h5>教学行为分析</h5>
          </div>
          <div>
            <Radar
              id="radar"
              style="height: 330px"
              :data-name="teachingBehavior"
              :series-data="teacherBData"
              v-if="teacherBData"
            ></Radar>
          </div>
        </div>
      </div>
      <!-- 三 -->
      <div class="disp_between">
        <div class="emotion">
          <div class="titile">
            <h5>学生情绪对比</h5>
          </div>
          <div style="height: 380px">
            <FlodLine
              :id="'line2'"
              v-if="studentEmotionData"
              :line-data="studentEmotionData"
              :y-text-data="yEmoteData"
            >
            </FlodLine>
          </div>
        </div>
        <div class="focus_contrast">
          <div class="titile">
            <h5>学生专注度对比</h5>
          </div>
          <div style="height: 380px">
            <FlodLine
              :id="'line1'"
              :is-emote-show="false"
              v-if="studentFocusData"
              :line-data="studentFocusData"
              :y-text-data="yFocusData"
            >
            </FlodLine>
          </div>
        </div>
        <div class="s_behavior_analysis">
          <div class="titile">
            <h5>学生行为分析</h5>
          </div>
          <div>
            <Radar
              id="radar2"
              style="height: 330px"
              :data-name="studentBehavior"
              v-if="studentBData"
              :series-data="studentBData"
            ></Radar>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择课程"
      :visible.sync="dialogStatus"
      width="1200px"
      custom-class="alBox"
      :close-on-click-modal="false"
    >
      <courseDialog
        @addReport="addReport"
        @cancelAI="dialogStatus = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import Heard from "../../common/ai/heard-info.vue";
import PieA from "../../common/echarts/PieA.vue";
import PieB from "../../common/echarts/PieB.vue";
import Radar from "../../common/echarts/Radar.vue";
import FlodLine from "../../common/echarts/fold-line.vue";
import evaluateCard from "../../common/ai/evaluate-card.vue";
import courseDialog from "../components/course-dialog.vue";
export default {
  components: {
    PieA,
    PieB,
    Radar,
    FlodLine,
    Heard,
    evaluateCard,
    courseDialog,
  },
  data() {
    return {
      ids: this.$route.query.id,
      dialogStatus: false,
      inputValue: null,
      radarColor: ["#FEDB65", "#00D1C8", "#00D104", "#565AFF", "#FF9D56"],
      lineColor: ["#FFA669", "#3158FF", "#00D104", "#D378B7", "#61D8D8"],
      lineBGColor: [
        "#ffa669b5",
        "#3158ff99",
        "#00d104ba",
        "#d378b7b8",
        "#61d8d8ba",
      ],
      yEmoteData: ["愤怒", "厌恶", "恐惧", "快乐", "中性", "悲伤", "惊喜"],
      yFocusData: ["未学习", "未听讲", "走神", "中性", "集中", "专注"],
      studentBehavior: ["听课时长", "实践时长", "讨论时长", "阅读时长"],
      teachingBehavior: ["板书时长", "互动时长", "讲授时长", "指导时长"],
      // classData: [
      //   { name: '第一节', time: '2024-01-26 16:54:55', class: '三年级（1）班', subject: '语文' },
      //   { name: '第二节', time: '2024-01-26 16:54:55', class: '三年级（1）班', subject: '语文' },
      //   { name: '第三节', time: '2024-01-26 16:54:55', class: '三年级（1）班', subject: '语文' }
      // ],

      course_info: null,
      // new
      loading: true, //加载动画
      // 对接完成
      course_info: {
        report_name: "20240130教学分析报告",
        teacher_name: "李老师",
        report_time: "2024-02-21  15:00~15:40",
        classData: [
          {
            course_name: "语文",
            class_name: "三年级（1）班",
            course_data: "2024年02月21日",
            course_time: "15:00~15:40",
          },
          {
            course_name: "语文",
            class_name: "三年级（1）班",
            course_data: "2024年02月21日",
            course_time: "15:00~15:40",
          },
        ],
      },
      // 课堂类型玫瑰图
      course_type: null,
      //课程反馈
      course_feedback: {
        participate_rate: "0%",
        hand_up_rate: "0%",
        hand_down_rate: "0%",
      },
      // 专注度反馈
      focus_feedback: {
        high_focus_rate: "0%",
        low_focus_rate: "0%",
      },
      teaching_situation: {
        teaching_rhythm: "暂无",
        dataList: null,
      },
      // 学生情绪对比
      studentEmotionData: null,
      // [
      // {
      //   name: '课堂一', data: [[1, 1],
      //   [2, 2],
      //   [3, 3],
      //   [4, 4],
      //   [5, 4],
      //   [6, 4],
      //   [7, 5],
      //   [8, 6],
      //   ], color: '#FFA669', lineBGColor: '#ffa669b5'
      // },
      // {
      //   name: '课堂二', data: [[14, 1],
      //   [15, 2],
      //   [16, 3],
      //   [17, 4],
      //   [18, 5],
      //   [19, 6],
      //   [20, 0],
      //   [21, 1],
      //   [22, 2],
      //   [23, 3],
      //   [24, 3],
      //   [25, 4],
      //   [26, 5],
      //   [27, 6],
      //   [28, 4],
      //   [29, 3]], color: '#317AFF', lineBGColor: '#3158ff99'
      // }
      // ],
      // 学生专注度对比
      // 对接完成
      studentFocusData: null,
      // [
      // {
      //   name: '课堂一', data: [[5, 2],
      //   [6, 1],
      //   [7, 5],
      //   [9, 2],
      //   [11, 3],
      //   [13, 4],
      //   [15, 4],
      //   [17, 5],
      //   [19, 2],
      //   [21, 4],
      //   [23, 3],
      //   [25, 4],
      //   [27, 5],
      //   [29, 1],
      //   [30, 2],
      //   [35, 3]], color: '#61D8D8', lineBGColor: '#61d8d8ba'
      // },
      // {
      //   name: '课堂二', data: [[14, 1],
      //   [15, 2],
      //   [16, 3],
      //   [17, 4],
      //   [18, 5],
      //   [19, 3],
      //   [20, 0],
      //   [21, 1],
      //   [22, 2],
      //   [23, 3],
      //   [24, 3],
      //   [25, 4],
      //   [26, 5],
      //   [27, 3],
      //   [28, 4],
      //   [29, 3]], color: '#D378B7', lineBGColor: '#d378b7b8'
      // }
      // ],
      studentBData: null,
      //   [{
      //   value: [100, 100, 100, 100],
      //   name: '课程一',
      //   color: '#00D1C8'
      // },
      // {
      //   value: [82, 90, 40, 185,],
      //   name: '课程二',
      //   color: '#FEDB65'
      // }],
      teacherBData: null,
      // teacherBData:
      //   [{
      //     value: [100, 180, 60, 30],
      //     name: '课程一',
      //     color: '#00D1C8'
      //   },
      //   {
      //     value: [82, 90, 40, 185],
      //     name: '课程二',
      //     color: '#FEDB65'
      //   }]
    };
  },
  created() {
    // 获取数据
    this.getMoreTeacherData();
  },
  methods: {
    openCourse(e) {
      console.log("openCourse---", e);
      this.dialogStatus = e;
    },
    // 获取多个教学报告
    getMoreTeacherData() {
      this.loading = true;
      const success = (res) => {
        this.loading = false;
        let data = res.data;
        this.dataAll = data;
        // 顶部课程信息
        if (data.course_info) {
          // 课程名称列表
          let classList = [];
          data.course_info.course_name.forEach((item) => {
            classList.push({
              ...item,
              course_data: item.live_date,
              course_time: item.live_time,
            });
          });
          this.course_info = {
            ...this.dataAll.course_info,
            classData: classList,
          };
        }

        // 课堂类型玫瑰图
        this.course_type = data.course_type;
        // 课程反馈
        this.course_feedback = data.teaching_situation.course_feedback;
        console.log("课程反馈---", this.course_feedback);

        // 专注度反馈
        this.focus_feedback = data.teaching_situation.focus_feedback;
        // 学生情绪-折现图
        if (data.expression) {
          // data.expression.expression_value = [[1, 2, 3, 4, 5, 3, 2, 1], [3, 4, 5, 1, 2, 4, 5, 1]]
          let arr = [];
          data.expression.expression_value.forEach((item, indx) => {
            let obj = {
              name: "课程" + (indx + 1),
              data: [],
              color: this.lineColor[indx],
              lineBGColor: this.lineBGColor[indx],
            };
            item.forEach((item2, indx2) => {
              obj.data.push([indx2 + 1, item2]);
            });
            console.log("学生情绪-折现图---", obj);
            arr.push(obj);
          });
          this.studentEmotionData = arr;
          console.log("学生情绪arr---", this.studentEmotionData);
          // this.studentEmotionData.data = data.expression.expression_value
          this.expression_summarize = data.expression.expression_summarize;
        }

        // 学生专注度曲线-折线图
        if (data.curve) {
          let arr = [];
          data.curve.curve_value.forEach((item, indx) => {
            let obj = {
              name: "课程" + (indx + 1),
              data: [],
              color: this.lineColor[indx],
              // 倒序显示颜色
              lineBGColor: this.lineBGColor[this.lineBGColor.length - 1 - indx],
            };
            item.forEach((item2, indx2) => {
              obj.data.push([indx2 + 1, item2]);
            });
            console.log("学生专注度曲线-折线图---", obj);
            arr.push(obj);
          });
          this.studentFocusData = arr;
          // this.studentFocusData.data = data.curve.curve_value
          this.expression_summarize = data.curve.curve_summarize;
        }

        //
        if (data.teaching_situation) {
          let teachingData = data.teaching_situation.teaching;
          this.teaching_situation.teaching_rhythm =
            teachingData.teaching_rhythm;
          let dataList = [
            {
              name: "教师讲授占比",
              value: teachingData.teacher_time_rate,
            },
            {
              name: "师生互动占比",
              value: teachingData.interaction_rate,
            },
            {
              name: "学生学习占比",
              value: teachingData.study_rate,
            },
            {
              name: "PPT翻页间隔",
              value: teachingData.flipping_interval,
            },
            {
              name: "师生互动频率",
              value: teachingData.interaction_rate,
            },
            {
              name: "学生练习频率",
              value: teachingData.study_frequency,
            },
          ];
          this.teaching_situation.dataList = dataList;
        }

        // 学生行为分析
        // 注：studentBData需要和studentBehavior的顺序一致
        if (data.student_behavior) {
          // data.student_behavior = [{ listen: '100', practice: '100', discuss: '100', read: '100' }, { listen: '120', practice: '120', discuss: '100', read: '100' }]

          let arr = [];
          data.student_behavior.forEach((item, indx) => {
            let obj = {
              name: "课程" + (indx + 1),
              value: [],
              color: this.radarColor[indx],
            };
            obj.value.push(item.listen);
            obj.value.push(item.practice);
            obj.value.push(item.discuss);
            obj.value.push(item.read);
            arr.push(obj);
            console.log("学生行为分析---", obj);
          });
          console.log("学生行为分析arr---", arr);

          this.studentBData = arr;
        }

        // 教师行为分析
        // 注：teacherBData需要和teachingBehavior的顺序一致
        if (data.teaching_behavior_duration) {
          let arr = [];
          data.teaching_behavior_duration.forEach((item, indx) => {
            let obj = {
              name: "课程" + (indx + 1),
              value: [],
              color: this.radarColor[indx],
            };
            obj.value.push(item.blackboard_duration);
            obj.value.push(item.interaction_duration);
            obj.value.push(item.teach_duration);
            obj.value.push(item.guidance_duration);
            arr.push(obj);
          });
          this.teacherBData = arr;
        }
      };
      // 将course_id字符串拆分为数组
      const courseIdArray = this.ids.split(",");
      const numArray = courseIdArray.map((str) => parseInt(str));

      this.$ajax({
        url: "api/ainew/courseTeacherContrast",
        method: "get",
        params: {
          // 课程id
          course_id: numArray,
        },
        func: { success: success },
      });
    },
    // 选择课程
    addReport(e) {
      this.$message.success("操作成功");
      this.ids = e.ids;
      // this.course_info = { ...this.course_info, report_name: e.reportName };
      this.toReplaceUrl();
    },
    toReplaceUrl() {
      // 获取当前 URL
      const currentURL = window.location.href;
      // 修改参数值
      var newId = this.ids; // 新的id值
      var updatedUrl = currentURL.replace(/(id=)[^\&]+/, "$1" + newId);

      // 输出修改后的URL
      location.replace(updatedUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
.multi {
  background-color: #122a54;
  width: 100%;
  height: 100%;
  color: #fff;

  .heard {
    height: 74px;
    background: url("../../../assets/images/teach_ai/top.png") center center /
      100% 100% no-repeat;
  }
}

h1 {
  font-size: 32px;
  font-weight: bold;
  line-height: 48px;
  text-align: center;
  font-family: SourceHanSansCN, SourceHanSansCN;
}

h5 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 33px;
  text-align: left;
}

.text_div {
  background-color: #13366e;
  padding: 20px 15px;
  border-radius: 10px;
}

.class_type,
.t_behavior_analysis,
.s_behavior_analysis {
  width: 30%;
  position: relative;
  height: 400px;
  margin: 10px 5px;
  overflow: hidden;
  background-color: #1d345c;

  .titile {
    width: 100%;
    height: 35px;
    padding-left: 30px;
    background: url("../../../assets/images/teach_ai/title_bg_564.png") center
      center / 100% 100% no-repeat;
  }
}

.educational_review {
  width: 40%;
  position: relative;
  height: 400px;
  margin: 10px 5px;
  overflow: hidden;
  background-color: #1d345c;

  .titile {
    width: 100%;
    height: 35px;
    padding-left: 30px;
    background: url("../../../assets/images/teach_ai/title_bg_721.png") center
      center / 100% 100% no-repeat;
  }
}

.emotion,
.focus_contrast {
  width: 35%;
  position: relative;
  height: 400px;
  margin: 10px 5px;
  overflow: hidden;
  background-color: #1d345c;

  .titile {
    width: 100%;
    height: 35px;
    padding-left: 30px;
    background: url("../../../assets/images/teach_ai/title_bg_564.png") center
      center / 100% 100% no-repeat;
  }
}

// end
.solid {
  padding: 10px;
  // margin:10px 5px;
  color: #fff;
  overflow: hidden;
}

.border {
  border-radius: 10px;
}

.disp_between {
  display: flex;
  justify-content: space-between;

  .title_b1,
  .title_b2 {
    width: 100%;
    height: 30px;
    line-height: 30px;

    span {
      align-items: center;
      font-size: 16px;
      color: #d8f0ff;
      padding-left: 50px;
    }
  }
}

.title_b1 {
  background: url("../../../assets/images/teach_ai/title2_bg_417.png") center
    center / 100% 100% no-repeat;
}

.title_b2 {
  background: url("../../../assets/images/teach_ai/title2_bg_261.png") center
    center / 100% 100% no-repeat;
}

.disp_around {
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.title_a {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}

.grid_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 30px;
}
</style>